<script setup lang="ts">
import { onMounted, shallowRef } from "vue";

defineOptions({
  name: "ExposureAnalysisBottom"
});

const getValueColor = (value: string) => {
  // 移除百分号并转换为数字
  const num = parseFloat(value.replace("%", ""));
  if (num > 3) {
    return "#2ECC71"; // 绿色
  } else if (num < 0) {
    return "#FF6B6B"; // 红色
  } else {
    return "#F1C40F"; // 黄色
  }
};

const formatValue = (value: string) => {
  return `<span style="color:${getValueColor(value)}">${value}</span>`;
};

const data = shallowRef([
  ["广州", formatValue("-2.5%"), "58000", "1", "12 : 9"],
  ["深圳", formatValue("0.7%"), "90000", "2", "12 : 6"],
  ["北京", formatValue("3.5%"), "500000", "3", "12 : 3"],
  ["上海", formatValue("3.5%"), "50000", "3", "12 : 2"],
  ["苏州", formatValue("-5.3%"), "30000", "1", "12 : 10"],
  ["南京", formatValue("3.5%"), "120000", "2", "12 : 4"],
  ["东莞", formatValue("3.5%"), "100000", "3", "12 : 7"],
  ["杭州", formatValue("3.5%"), "130000", "4", "12 : 5"],
  ["南宁", formatValue("-6.5%"), "20000", "1", "12 : 9"],
  ["福州", formatValue("3.5%"), "120000", "2", "12 : 4"],
  ["合肥", formatValue("-3.5%"), "10000", "1", "12 : 10"],
  ["长沙", formatValue("3.5%"), "130000", "2", "12 : 4"]
]);

const config = shallowRef({
  header: [
    '<span style="color:#61d2f7;">城市</span>',
    '<span style="color:#61d2f7;"> 相比昨日增长率</span>',
    '<span style="color:#61d2f7;">数量</span>',
    '<span style="color:#61d2f7;">等级</span>',
    '<span style="color:#61d2f7;">正负向比例</span>'
  ],
  data: [],
  columnWidth: [100],
  align: ["center"],
  headerBGC: "transparent",
  oddRowBGC: "rgba(18, 28, 43,0.3)",
  evenRowBGC: "rgba(18, 28, 43,0.3)",
  rowNum: 6,
  index: true,
  rowBorder: true, // 启用行边框
  borderColor: "rgba(255, 255, 255, 0.3)" // 设置边框颜色为半透明白色
});

onMounted(() => {
  config.value.data = [...data.value];
});
</script>

<template>
  <div class="bottomSc-box">
    <div class="title">
      <span>每日曝光量城市实时动态分析</span>
    </div>
    <div class="bottomSc-board-wrapper">
      <dv-scroll-board :config="config" class="scroll-board" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bottomSc-box {
  box-sizing: border-box;
  width: 100%;
  height: 100%;

  .title {
    position: absolute;
    top: -15px;
    left: 35%;
    width: 30%;
    height: 35px;
    font-size: 16px;
    font-weight: bold;
    line-height: 35px;
    color: #fff;
    text-align: center;
    background-color: #2e6099;
    border-radius: 18px;
  }

  .bottomSc-board-wrapper {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 30px;
  }

  :deep(.dv-scroll-board) {
    .header {
      border-bottom: 1px solid rgb(255 255 255 / 30%);
    }

    .rows {
      .row-item {
        border-bottom: 1px solid rgb(255 255 255 / 30%);
      }
    }
  }
}
</style>
